<template>
  <block>
    <!-- 默认加载前的占位图片 -->
    <image 
      v-if='loadState === 0'
      class="max"
      :class="_class + (loadState === 1 ? ' loaded' : '')"
      @click="$emit('click', $event)"
      lazy-load
      :src='defaultUrl' />
    <!-- 加载失败的图片 -->
    <image 
      v-else-if='loadState === 2'
      :class='_class'
      :style="_style"
      :mode='_mode'
      :src='errorUrl'
      lazy-load
      @click="$emit('click', $event)"/>
    <!-- 实际加载完成的图片 -->
    <image
      :class="_class + (loadState === 1 ? ' loaded' : ' loading')"
      :style="_style"
      :src="src"
      :mode='_mode'
      @load="load"
      @error="error"
      lazy-load
      @click="$emit('click', $event)"/>
  </block>
</template>
<script>
/**
 * 图片加载器: 实际图的高度根据原图自适应, 高度同样给值的原因时防止加载成功前图片拉伸的情况。
 * 注：如果通过父组件设置图片样式没有效果可尝试vue scoped穿透，示例：<style scoped> .a >>> .b {}</style>
 */
export default {
  props: {
    _src: { // 图片路径，为避免和属性src重复所以用_src
      type: String,
      default: ''
    },
    _style: { // 图片样式，为保持代码整洁，尽量避免使用行内样式
      type: String,
      default: ''
    },
    _class: { // 图片的class
      type: String,
      default: ''
    },
    _mode: { // 图片缩放模式，详情参考https://developers.weixin.qq.com/miniprogram/dev/component/image.html
      type: String,
      default: 'widthFix'
    },
    _error: {
      type: String,
      default: '/static/error.png'
    }
  },
  data () {
    return {
      src: '',
      // 图片加载前的占位
      defaultUrl: this.getSystemInfo().preloadPhoto+'.png',
      errorUrl: this._error, // 图片加载失败的占位
      loadState: 0 // 图片加载状态（0 加载前以及加载中 1加载成功 2 加载失败）
    }
  },
  onReady() {
    this.src = this._src;
  },
  watch: {
    _src (val) {
      this.src = val
    }
  },
  methods: {
    error (e) { // 失败回调
      this.loadState = 2
    },
    load (e) { // 加载成功返回该图片的实际高度
      this.loadState = 1
    }
  }
}
</script>
<style scoped>
  block {
    position: relative;
  }
  .loading.loading.loading {
    width: 0upx !important;
    height: 0upx !important;
    margin: 0upx !important;
  }
  .prestrain {
    width: 0upx;
    height: 0upx;
  }
  .max {
    max-width: 170upx;
    max-height: 170upx;
  }
</style>
